const LxHeader = {
  render(h) {
    return h(
      'el-header',
      {
        class: ['h-10', 'bg-[#292961]', 'flex', 'items-center', 'justify-between', 'px-4', 'z-50'],
        attrs: { height: '40px' }
      },
      [
        // 左侧区域
        h('div', { class: 'flex items-center' }, [
          h(
            'el-button',
            {
              props: { type: 'text' },
              class: ['text-[#d1d1d9]', 'hover:bg-gray-700'],
              on: {
                click: this.onToggleMenu
              }
            },
            [h('i', { class: 'fas fa-bars' })]
          ),
            h('div', { class: 'text-[#d1d1d9] text-sm font-bold ml-4' }, '管理系统'),
            h('el-button', {
                class: ['text-[#d1d1d9]', 'hover:bg-[#3d3d7a]', 'ml-4', 'bg-[#292961]', 'border-0'],
                on: {
                    click: () => {
                        window.open(this.getLvPath(), '_blank');
                    }
                }
            }, '直播'),
            h('div', { class: 'ml-4 relative' })
        ]),

        // 右侧用户菜单
        h('div', { class: 'flex items-center space-x-4' }, [
          h('el-dropdown', [
            // 触发元素
            h(
              'span',
              {
                class: 'flex items-center text-[#d1d1d9] hover:text-white'
              },
                [
                    h('div', {
                        class: 'flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white',
                        style: { fontSize: '14px' }
                    }, this.currentUser.name ? this.currentUser.name.charAt(0) : '未'),
                    h('span', { class: 'ml-2' }, this.currentUser.name || '未登录'),
                    h('i', { class: 'fas fa-chevron-down ml-2 text-xs' })
                ]
            ),

            // 下拉菜单
            h('el-dropdown-menu', { slot: 'dropdown' }, [
                this.renderDropdownItem(h,
                    h('a', {
                        attrs: {
                            href: this.getHomePath(),
                            target: '_blank'
                        },
                        on: {
                            click: (e) => {
                                e.preventDefault();
                                window.open(this.getHomePath(), '_blank');
                            }
                        }
                    }, '首页'),
                    'fa-home'
                ),
              this.renderDropdownItem(h, '用户中心', 'fa-user'),
                this.renderDropdownItem(h,
                    h('a', {
                        attrs: {
                            href: this.getOrderCenterPath(),
                            target: '_blank'
                        },
                        on: {
                            click: (e) => {
                                e.preventDefault();
                                window.open(this.getOrderCenterPath(), '_blank');
                            }
                        }
                    }, '订单中心'),
                    'fa-cog'
                ),
              this.renderDropdownItem(h, '产品中心', 'fa-cog'),
              this.renderDropdownItem(h, '库存中心', 'fa-cog'),
              this.renderDropdownItem(h, '财务中心', 'fa-cog'),
              this.renderDropdownItem(h, '数据中心', 'fa-cog'),
              this.renderDropdownItem(h, '系统中心', 'fa-cog'),
              this.renderDropdownItem(h, '消息中心', 'fa-cog'),
                h(
                    'el-dropdown-item',
                    {
                        class: 'text-red-500',
                        attrs: { divided: true },
                        nativeOn: {
                            click: () => {
                                // 直接调用全局的exit函数
                                if (typeof exit === 'function') {
                                    exit(this.type);
                                } else {
                                }
                            }
                        }
                    },
                    [h('i', { class: 'fas fa-sign-out-alt mr-2' }), '退出登录']
                )
            ])
          ])
        ])
      ]
    )
  },
    props: {
        type: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
        }
    },
  // name: 'LxHeader',
  methods: {
    // 封装下拉项生成方法
    renderDropdownItem(h, content, icon) {
      return h('el-dropdown-item', [icon && h('i', { class: `fas ${icon} mr-2` }), typeof content === 'string' ? content : content])
    },
    onToggleMenu() {
      this.$emit('toggle')
    },
    getOrderCenterPath() {
        let path = ''
        switch (this.type) {
            case 0:
                path = 'pages/index.html';
                break;
            case 1:
                path = 'index.html';
                break;
            case 2:
                path = '../index.html';
                break;
        }
        return path
    },
      getLvPath() {
          let path = ''
          switch (this.type) {
              case 0:
                  path = 'pages/lv/lv.html';
                  break;
              case 1:
                  path = '../pages/lv/lv.html';
                  break;
              case 2:
                  path = '../../pages/lv/lv.html';
                  break;
          }
          return path
      },
      getHomePath() {
          let path = ''
          switch (this.type) {
              case 0:
                  path = 'index.html';
                  break;
              case 1:
                  path = '../index.html';
                  break;
              case 2:
                  path = '../../index.html';
                  break;
          }
          return path
      },

  }
}
export default LxHeader
